<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    * {
      background-color: rgba(255, 0, 0, .2);
    }

    * * {
      background-color: rgba(0, 255, 0, .2);
    }

    * * * {
      background-color: rgba(0, 0, 255, .2);
    }

    * * * * {
      background-color: rgba(255, 0, 255, .2);
    }

    * * * * * {
      background-color: rgba(0, 255, 255, .2);
    }

    * * * * * * {
      background-color: rgba(255, 255, 0, .2);
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    .clear {
      clear: both;
    }

    #s1 .container {
      float: left;
      width: 33.333%;
      height: 0;
      overflow: hidden;
      padding-bottom: 26%;
    }

    img {
      width: 100%;
      height: auto;
    }

    #s2 .container {
      width: 33.333%;
      float: left;
    }

    #s2 .container .img {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
<section id="s1">
  <div class="container">
    <div>title</div>
    <img src="http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg" alt="">
  </div>
  <div class="container">
    <div>title</div>
    <img src="http://img06.tooopen.com/images/20160922/tooopen_sy_179662854161.jpg" alt="">
  </div>
  <div class="container">
    <div>title</div>
    <img src="http://img06.tooopen.com/images/20160806/tooopen_sy_174345369776.jpg" alt="">
  </div>
  <div class="container">
    <div>title</div>
    <img src="http://img02.tooopen.com/images/20160518/tooopen_sy_162761448464.jpg" alt="">
  </div>
  <div class="container">
    <div>title</div>
    <img src="http://img05.tooopen.com/images/20151003/tooopen_sy_144338856273.jpg" alt="">
  </div>
  <div class="clear"></div>
</section>

<section id="s2">
  <div class="container">
    <div>title</div>
    <div class="img">
      <img src="http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg" alt="">
    </div>
  </div>
  <div class="container">
    <div>title</div>
    <div class="img">
      <img src="http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg" alt="">
    </div>
  </div>
  <div class="container">
    <div>title</div>
    <div class="img">
      <img src="http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg" alt="">
    </div>
  </div>
  <div class="container">
    <div>title</div>
    <div class="img">
      <img src="http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg" alt="">
    </div>
  </div>
  <div class="container">
    <div>title</div>
    <div class="img">
      <img src="http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg" alt="">
    </div>
  </div>

  <div class="clear"></div>
</section>
</body>
</html>
